<template>
	<view>
		<view>
			<view style="height: var(--status-bar-height);width: 100%;"></view>
			<view class="nav">
				<u-icon name="arrow-left" color="#fff" size="28" @click="navback"></u-icon>
				<view class="navtitle">分享好友</view>
			</view>
			<view class="mabg">
				<view class="mt">我的推荐码</view>
				<view class="mt">{{recommendCode}}</view>
				<view class="c-bg-box">
					<view class="c-bg">
						<view class="qrimg">
						   <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val"
						   :size="size" :unit="unit" :background="background" :foreground="foreground"
						    :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" 
						    :loadMake="loadMake" :usingComponents="true" />
						</view>
					</view>
				</view>
				<view class="mt1">截图发送给好友打开APP扫一扫</view>
			</view>
		</view>
		<!-- <canvas canvas-id="qrcode" v-if ="url == '' " style="opacity: 1;"></canvas> -->
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default{
		components: {tkiQrcode},
		data(){
			return{
				url:"",
				ifShow:true,
				val: '', // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#ffffff', // 背景色
				foreground: '#333333', // 前景色
				pdground: '#333333', // 角标色
				icon: '', // 二维码图标
				iconsize: 170, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64
				recommendCode:''
			}
		},
		onLoad(e) {
			this.val="http://laibaapp.bxwhl.com/#/pages/login/register?ma="+e.ma
			this.recommendCode=e.ma
		},
		methods:{
			navback(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style>
	.qrimg{
		width:170rpx ;
		height: 170rpx;
		position: relative;top: 10rpx;
		left: -15rpx;
	}
	.mt1{
		height: 36rpx;
		font-size: 36rpx;
		font-family: SourceHanSansCN-Normal;
		line-height: 51rpx;
		color: #000000;
		opacity: 1;
		text-align: center;
		margin-top: 30rpx;
	}
	.c-bg{
		width:402rpx ;
		height: 402rpx;
		background-image: url(/static/bg/codebg.png);
		background-repeat: no-repeat;
		background-size: 402rpx 402rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.c-bg-box{
		display: flex;
		justify-content: center;
		margin-top: 130rpx;
	}
	.mt{
		font-size: 46rpx;
		font-family: SourceHanSansCN-Medium;
		line-height: 69rpx;
		color: #222B45;
		opacity: 1;
		margin-bottom: 40rpx;
		text-align: center;

	}
	.mabg{
		width:626rpx;
		height: 908rpx;
		background-image: url(/static/bg/card.png);
		background-repeat: no-repeat;
		background-size: 626rpx 908rpx;
		margin-left: 62rpx;
		margin-top:110rpx ;
		padding: 40rpx;
	}
	.navtitle{
		width: 400rpx;
		text-align: center;
		position: absolute;left: 175rpx;
	}
	.nav{
		height: 88rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #FFFFFF;
		justify-content: space-between;
		position: relative;
	}
	page{
		background: linear-gradient(262deg,#0DB14D 0%, #1DB458 22%, #0F9F48 80%);
	}
</style>
